import React, { Component } from 'react'

let totalPage = 0

export default class Pagination extends Component {
  state={
    current:1,
    pageSize:10,
    total:0
  }
  componentWillReceiveProps(newProps){
    this.setState({
      current: newProps.pagination.current,
      pageSize: newProps.pagination.pageSize,
      total: newProps.pagination.total
    })

  }
  componentDidMount(){
  }

  handlePageChange =(page)=>{
    let pages = 0
    switch (page) {
      case 'prev':
        pages = this.state.current - 1
        break;
      case 'next':
        pages = this.state.current + 1
        break;
      case 'five':
        pages = this.state.current - 5
        break;
      case 'unfive':
        pages = this.state.current + 5
        break;
      default:
        pages = page
        break;
    }
    if (pages < 1 ) return
    if (pages > totalPage ) return

    // console.log(pages)
    
    this.props.handleChange(pages)
    // console.log(this.props)
    
  }

  render() {
    let pageArr = []
    let start=0,end=0

    const { current=1 , pageSize =20, total=0 } = this.props.pagination

    totalPage = Math.ceil(total / pageSize)

    if (!!totalPage){
      if (totalPage <= 10) {
        start = 2
        end = totalPage - 1
      } else {
        start = current - 2
        end = current + 2

        start = (start < 2) ? 2 : start
        end = (end < 5) ? 5 : end

        start = (start > totalPage - 4) ? totalPage - 4 : start
        end = (end > totalPage - 2) ? totalPage - 1 : end

      }
    }
    for (let i = start; i <= end; i++) {
      pageArr.push(
        <li onClick={this.handlePageChange.bind(null, i)}
          key={"page_li_" + i}
          className={current === i ? 'active' : ''}
        >
          <a href="javascript:;">{i}</a>
        </li>
      )
    }
    
    return (
      <nav >
        {totalPage >= 2 && <ul className="pagination pull-right" style={{marginBottom:0}}>
          <li onClick={this.handlePageChange.bind(null, 'prev')}>
            <a href="javascript:;" >
              <span >&laquo;</span>
            </a>
          </li>
          <li onClick={this.handlePageChange.bind(null, 1)} className={current === 1 ? 'active' : ''}>
            <a href="javascript:;" >
              <span >1</span>
            </a>
          </li>
          {start > 2 ? <li onClick={this.handlePageChange.bind(null, 'five')}>
            <a href="javascript:;" >
              <span >···</span>
            </a>
          </li> :''}
          {
            pageArr
          }
          {/* <li onClick={this.handlePageChange.bind(null,1)}><a href="javascript:;">1</a></li> */}
          
          {end < totalPage - 1 ? <li onClick={this.handlePageChange.bind(null, 'unfive')}>
            <a href="javascript:;" >
              <span >···</span>
            </a>
          </li>:''}
          {totalPage !== 1 && <li onClick={this.handlePageChange.bind(null, totalPage)} className={current === totalPage ? 'active' : ''}>
            <a href="javascript:;" >
              <span >{totalPage}</span>
            </a>
          </li>}
          <li onClick={this.handlePageChange.bind(null, 'next')}>
            <a href="javascript:;" >
              <span >&raquo;</span>
            </a>
          </li>
        </ul>}
      </nav>
    )
  }
}
